<template>
  <section class="commonNavUtil">
    <div class="send-wrap">
      
      <input class="search-input" v-model="content" placeholder="输入内容" type="text">
      <div class="more" @click="isShowBtn = !isShowBtn"></div>
      <div class="button" @click="sendFn()">发送</div>
    </div>
    <div class="gift-wrap" v-if="isShowBtn">
      <div class="other">
        <button class=""  @click="connectFn()">连线</button>
        <button v-if="showPrepareBtn" @click="prepareRedPacketFn">初始化红包雨</button>
        <button v-if="showStartBtn" @click="startRedPacketFn">开始派发红包雨</button>
      </div>
      <div class="giftItem">
        <div class="item" @click="selectSvga(item)" v-for="(item, index) in localSvgaList" :key="index" :style="{background: `url(${localImgList[index]}) no-repeat center`}"></div>
      </div>
      
    </div>
  </section>
</template>
<script>
import Client from "../../../req/common.js";
import reqApis from "../../../req/reqApis.js";

export default {

  props: {
    anchorConfigObj: {
      type: Object
    },
    redPacketConfigCode: {
      default: null
    },
    iNow: {
      default: 0
    },
    livingType: {
      default: 0
    }
  },
  data () {
    return {
      showPrepareBtn: false,
      showStartBtn: false,
      content: "",
      isShowBtn: false,
      svgaList: [],
      localImgList: [
        new URL("../../../assets/svga/img/爱心.png", import.meta.url),
        new URL("../../../assets/svga/img/女巫.png", import.meta.url),
        new URL("../../../assets/svga/img/跑车.png", import.meta.url),
        new URL("../../../assets/svga/img/天使.png", import.meta.url)
      ],
      localSvgaList: [
        {id: 1,url: new URL("../../../assets/svga/img/爱心.svga", import.meta.url)},
        {id: 2,url: new URL("../../../assets/svga/img/女巫.svga", import.meta.url)},
        {id: 3,url: new URL("../../../assets/svga/img/跑车.svga", import.meta.url)},
        {id: 4,url: new URL("../../../assets/svga/img/天使.svga", import.meta.url)}
      ]
    }
  },
  created() {
    this.getGiftListFn();
  },
  mounted() {
    
     console.log(888, this.redPacketConfigCode)
  },
  watch: {
    redPacketConfigCode(newValue, oldValue) {
        if(newValue != null){
          this.showPrepareBtn = true;
        }
    },
  },
  methods: {
    connectFn() {
      this.$emit("connectFn");
    },
     sendFn(){
      this.$emit("sendInfoFn", this.content);
      this.content = "";
     },
     selectSvga(item){
      let params = {
        url: item.url,
        id: item.id
      };
      this.$emit("selectSvgaFn", params);
      this.isShowBtn = false;
     },
     startRedPacketFn() {
      let params = {}
      reqApis.startRedPacketApi(params).then(res => {
        this.$emit("startRedPacketFn")
      }).catch(err => {

      })
     },
     prepareRedPacketFn() {
      let params = {
        roomId: this.anchorConfigObj.roomId
      };
        reqApis.prepareRedPacketApi(params).then(res => {
          this.showStartBtn = true;
          this.showPrepareBtn = false;
          this.$message.success('红包数据初始化完成');
        }).catch(err => {
           this.$message.error(resp.msg);
        })
     },

     getGiftListFn() {
        reqApis.getGiftListApi({}).then(res => {
          this.svgaList = res.data;
          
          console.log("礼物列表",res);
        }).catch(err => {
          
        })
     }
    
  },
}
</script>
<style lang="less" scoped>
.commonNavUtil {
  width: 3.75rem;
  height: .5rem;
  background: white;
  display: flex;
  position: relative;
  padding: 0 0.1rem;
  .gift-wrap {
    width: 3.55rem;
    padding: 0.1rem;
    background: #c3bdbd;
    z-index: 2;
    position: absolute;
    bottom: .5rem;
    
    .other {
      font-size: .14rem;
    }
    .giftItem {
      display: flex;
      .item {
        display: flex;
        width: .5rem;
        height: 0.5rem;
        background-size: cover;
        margin-right: 0.1rem;
        background-size: cover !important;
      }
    }
    .conn {
      align-items: center;;
    }
  }
  .send-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .more {
      width: .5rem;
      height: .5rem;
      background: url("../../../assets/images/shop-icon-3.png") no-repeat left;
    }
    .button {
      width: .52rem;
      height: 0.4rem;
      line-height: 0.4rem;
      text-align: center;
      font-size: .2rem;
      background: #9adc9a;
    }
    
  }
  .search-input {
    flex: 1;
    width: 2.5rem;
    height: .5rem;
    line-height: .3rem;
    font-size: .2rem;
    color: #3c3c40;
  }
  .search-input::-webkit-input-placeholder{
    font-size: .16rem;
    color: #3c3c40;
  } 
  
}
</style>
